<template>
    <el-drawer title="设置轮播图" v-model="dialogVaisible"  size="50%" 
    destroy-on-close="true" :show-close="true" :wrapperClosable="true">
    <el-form :model="form" label-width="80px" :inline="false" size="normal">
        <el-form-item label="轮播图">
                <ChooseImage preview :limit="9" v-model="form.banners"/>
        </el-form-item>
            <el-button type="primary"  @click="submit" :loading="loading">提交</el-button>
        <el-form-item >
                
        </el-form-item>

    </el-form>
    
    </el-drawer>
</template>

<script setup>
import ChooseImage from "~/components/image/ChooseImage.vue"
import { readGoods,setGoodsBanner } from "~/api/goods.js"
import {reactive, ref} from 'vue'
import { toast } from '~/composables/util.js';
const dialogVaisible = ref(false)
const goodsId = ref(0)
const form = reactive({
    banners:[]
})
const loading = ref(false)
const open = (row) => {
    goodsId.value = row.id
    row.bannersLoading = true
    readGoods(goodsId.value).then(res => {
        form.banners =  res.goodsBanner.map(o => o.url)
        dialogVaisible.value = true
    }).finally(() => {
        row.bannersLoading = false
    })
    
}
const emit = defineEmits(["reloadData"])
const submit = () => {
    loading.value = true
    setGoodsBanner(goodsId.value , form)
    .then(res => {
        toast("设置轮播图成功")
        dialogVaisible.value = false
        emit("reloadData")
    }).finally(() => { loading.value = false })
}

defineExpose({
    open
})
</script>